<template>
  <div class="canvas-box">
    <canvas ref="canvas" id="canvas" class="canvas"></canvas>
  </div>
</template>
<script>

import {
  drawGuardRail,
  drawTrack,
  drawTrackCrossingLeftUp,
  drawTrackCrossingRightDown,
  drawTrackCrossingLeftDown,
  drawTrackCrossingRightUp,
  drawTrackSleeper,
  drawTrackPointRight,
  drawTrackPointLeft,
  drawHalfCircleWithRectBorder, drawSignal, drawBoxUp, drawBoxMid, drawPillar
} from "../picture/rail2";

export default {
  components: {},
  data() {
    return {
      // tab 切换
      activeName: 'first',
      // 画布
      canvas: null,
      // 画布 高度
      canvasHeight: 660,
      // 画布 宽度
      canvasWidth: null,
      // 画布内容
      canvasContext: null,
      // 轨枕队列
      sleeperQueue: null,
    };
  },
  mounted() {
    this.initCanvas()
  },
  methods: {
    // 初始化布局
    initCanvas() {
      this.canvasWidth = this.$refs.canvas.parentElement.clientWidth; // 获取父容器宽度
      this.animationId = null
      this.canvas = new fabric.Canvas('canvas', {
        width: this.canvasWidth,
        height: this.canvasHeight,
        selection: false,
        selectable: false, // 禁止选择和拖动
        evented: false,     // 禁止触发事件
        lockMovementX: true,
        lockMovementY: true
      })
      this.draw123()
    },

    draw123(){
      const sleeper = {}
      drawTrack(this.canvas, 0, 220, 5000, 220, 15)
      drawTrack(this.canvas, 0, 420, 5000, 420, 15)

      drawGuardRail(this.canvas,500,700,900,320,15 )

      drawTrackCrossingLeftUp(this.canvas,50,2000)
      drawTrackCrossingLeftDown(this.canvas,50,2000)
      drawTrackCrossingRightUp(this.canvas,50,2000)
      drawTrackCrossingRightDown(this.canvas,50,2000)
      for(let i=0;i<100;i++){
        const sleeper = {
          sleeperNo: i
        }
        drawPillar(this.canvas,i*80,20,5)
        drawTrackSleeper(this.canvas, i*80, 160, i*80, 500, 25, '#303030', this.timeValue,sleeper)
        drawSignal(this.canvas, 160, 540, 160, 620, 25, '#303030', this.timeValue,sleeper)
        drawBoxUp(this.canvas, 240, 60, 240, 100, 25, '#303030', this.timeValue,sleeper)
        drawBoxMid(this.canvas, 240, 300, 240, 360, 25, '#303030', this.timeValue,sleeper)
      }
    },

  }
};
</script>

<style scoped>
.canvas-box{
  width: 100%;
  height: 82%;
  border: #999999 1px solid;
  border-radius: 8px;
}
.canvas{
  width: 100%;
  height: 100%;
}
</style>
